import React from 'react'
import { connect } from 'dva'

import './style.css'

class CartItem extends React.Component {
    changeState = (k, v) => {
        this.setState({ [k]: v })
    }

    renderCommodityInfo = () => {
        const { data } = this.props
        return (
            <div className='cartItem-body-info'>
                {
                    Array.isArray(data.banners) && <img src={data.banners[0]} />
                }
                <div className='cartItem-body-info_details' >
                    <span>
                        {data.title}
                    </span>
                    <span className='price'>
                        ¥ {data.price}
                    </span>
                </div>
            </div>
        )
    }
    
    removeCart = () => {
        const { dispatch, data } = this.props
        dispatch({
            type: 'cart/removeCart',
            payload: data
        })
    }

    reduceCart = () => {
        const { dispatch, data } = this.props
        if (data.count > 1) {
            data.count --
            dispatch({
                type: 'cart/pushCart',
                payload: data
            })
        } else {
            alert('数量不能少于1')
        }
    }

    pushCart = () => {
        const { dispatch, data } = this.props
        data.count ++
        dispatch({
            type: 'cart/pushCart',
            payload: data
        })
    }

    checkd = () => {
        const { dispatch, data } = this.props
        data.checked = !data.checked
        dispatch({
            type: 'cart/pushCart',
            payload: data
        })
    }


    renderBtns = () => {
        const { data } = this.props
        return (
            <div className='cartItem-body-ctrl'>
                <span 
                    className='iconfont icon-jian' 
                    onClick={this.reduceCart}
                ></span>
                {data.count}
                <span 
                    className='iconfont icon-ziyuan' 
                    onClick={this.pushCart}
                ></span>
            </div>  
        )
    }

    renderChoose = () => {
        const { data } = this.props
        return (
            <div 
                className={`cartItem-body-radio ${data.checked && 'cartItem-body-radio_active'}`} 
                onClick={this.checkd}
            >
                <i className='iconfont icon-danyehuaban'></i>
            </div>
        )
    }

    render() {
        return (
            <div className='cartItem' >
                <div className='cartItem-wrap'>
                    <div className='cartItem-body'>
                        {this.renderChoose()}
                        {this.renderCommodityInfo()}
                        {this.renderBtns()}
                    </div>
                    <div 
                        className='cartItem-del'
                        onClick={this.removeCart}
                    >
                        <div><i className='iconfont icon-del'></i></div>
                    </div>
                </div>
            </div>
        )
    }
}

export default connect()(CartItem)
